<template>
	<view class="container">
		<view class="weather-card">
			<view class="header">
				<text class="city">{{ cityInfo.city }}</text>
				<text class="update-time">更新于: {{ updateTime }}</text>
			</view>

			<view v-if="loading" class="loading">
				<text>加载中...</text>
			</view>

			<view v-else-if="error" class="error">
				<text>数据加载失败</text>
				<button @tap="getWeatherData" class="retry-btn">重试</button>
			</view>

			<view v-else class="weather-info">
				<view class="tomorrow-label">
					<text>明天天气预报</text>
				</view>

				<view class="weather-detail">
					<view class="date-info">
						<text class="date">{{ tomorrowWeather.ymd }}</text>
						<text class="week">{{ tomorrowWeather.week }}</text>
					</view>

					<view class="temperature">
						<text class="temp">{{ tomorrowWeather.temp }}°C</text>
						<text class="weather-type">{{ tomorrowWeather.type }}</text>
					</view>

					<view class="temp-range">
						<view class="high-temp">
							<text class="label">最高温</text>
							<text class="value">{{ tomorrowWeather.high }}</text>
						</view>
						<view class="low-temp">
							<text class="label">最低温</text>
							<text class="value">{{ tomorrowWeather.low }}</text>
						</view>
					</view>

					<view class="additional-info">
						<view class="info-item">
							<text class="label">风向</text>
							<text class="value">{{ tomorrowWeather.fx }}</text>
						</view>
						<view class="info-item">
							<text class="label">风力</text>
							<text class="value">{{ tomorrowWeather.fl }}</text>
						</view>
						<view class="info-item">
							<text class="label">空气质量</text>
							<text class="value">{{ tomorrowWeather.aqi }}</text>
						</view>
					</view>

					<view class="notice">
						<text>{{ tomorrowWeather.notice }}</text>
					</view>
				</view>
			</view>

			<button @tap="getWeatherData" class="refresh-btn">刷新数据</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				error: false,
				cityInfo: {
					city: '泉州市',
					parent: '福建'
				},
				tomorrowWeather: {
					ymd: '',
					week: '',
					type: '',
					temp: '',
					high: '',
					low: '',
					fx: '',
					fl: '',
					aqi: '',
					notice: '',
					sunrise: '',
					sunset: ''
				},
				updateTime: ''
			}
		},
		onLoad() {
			this.getWeatherData()
		},
		methods: {
			getWeatherData() {
				this.loading = true
				this.error = false

				uni.request({
					url: 'http://t.weather.sojson.com/api/weather/city/101230501',
					method: 'GET',
					success: (res) => {
						console.log('API响应数据:', res.data)

						if (res.data.status === 200) {
							const data = res.data
							const forecast = data.data.forecast

							if (forecast && forecast.length > 1) {
								// 获取明天的天气预报（索引为1）
								const tomorrow = forecast[1]

								// 计算平均温度（从高温和低温字符串中提取数字）
								const highTemp = parseInt(tomorrow.high.replace(/[^0-9]/g, ''))
								const lowTemp = parseInt(tomorrow.low.replace(/[^0-9]/g, ''))
								const avgTemp = Math.round((highTemp + lowTemp) / 2)

								this.tomorrowWeather = {
									ymd: tomorrow.ymd,
									week: tomorrow.week,
									type: tomorrow.type,
									temp: avgTemp, // 使用计算的平均温度
									high: tomorrow.high,
									low: tomorrow.low,
									fx: tomorrow.fx,
									fl: tomorrow.fl,
									aqi: tomorrow.aqi,
									notice: tomorrow.notice,
									sunrise: tomorrow.sunrise,
									sunset: tomorrow.sunset
								}

								this.cityInfo = {
									city: data.cityInfo.city,
									parent: data.cityInfo.parent
								}

								this.updateTime = this.formatTime(new Date())
								this.error = false
							} else {
								this.error = true
							}
						} else {
							this.error = true
						}

						this.loading = false
					},
					fail: (err) => {
						console.error('请求失败:', err)
						this.error = true
						this.loading = false
					}
				})
			},

			formatTime(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hour = String(date.getHours()).padStart(2, '0')
				const minute = String(date.getMinutes()).padStart(2, '0')
				return `${year}-${month}-${day} ${hour}:${minute}`
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
		min-height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.weather-card {
		width: 100%;
		max-width: 600rpx;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.city {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.update-time {
		font-size: 24rpx;
		color: #666;
	}

	.loading,
	.error {
		text-align: center;
		padding: 60rpx 0;
		color: #666;
	}

	.error {
		color: #e74c3c;
	}

	.retry-btn {
		margin-top: 20rpx;
		background: #3498db;
		color: white;
		border: none;
		padding: 15rpx 30rpx;
		border-radius: 25rpx;
		font-size: 26rpx;
	}

	.tomorrow-label {
		background: #3498db;
		color: white;
		padding: 15rpx 25rpx;
		border-radius: 30rpx;
		text-align: center;
		margin-bottom: 30rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.weather-detail {
		margin-bottom: 40rpx;
	}

	.date-info {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.date {
		font-size: 32rpx;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.week {
		font-size: 28rpx;
		color: #666;
	}

	.temperature {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.temp {
		font-size: 72rpx;
		font-weight: bold;
		color: #e74c3c;
		display: block;
		line-height: 1.2;
	}

	.weather-type {
		font-size: 28rpx;
		color: #666;
		margin-top: 10rpx;
		display: block;
	}

	.temp-range {
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
	}

	.high-temp,
	.low-temp {
		text-align: center;
	}

	.high-temp .value {
		color: #e74c3c;
		font-size: 36rpx;
		font-weight: bold;
	}

	.low-temp .value {
		color: #3498db;
		font-size: 36rpx;
		font-weight: bold;
	}

	.label {
		display: block;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.additional-info {
		display: flex;
		justify-content: space-around;
		background: #f8f9fa;
		padding: 25rpx 20rpx;
		border-radius: 15rpx;
		margin-bottom: 30rpx;
		flex-wrap: wrap;
	}

	.info-item {
		text-align: center;
		flex: 1;
		min-width: 33%;
	}

	.info-item .value {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	.notice {
		background: #fff3cd;
		color: #856404;
		padding: 20rpx;
		border-radius: 10rpx;
		text-align: center;
		font-size: 26rpx;
		border: 1rpx solid #ffeaa7;
	}

	.refresh-btn {
		width: 100%;
		background: #3498db;
		color: white;
		border-radius: 50rpx;
		font-size: 28rpx;
		padding: 20rpx;
		border: none;
	}

	.refresh-btn:active {
		background: #2980b9;
	}
</style>